<!DOCTYPE html>
<html>
<head>
    <title>老柳系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .search-box, .add-user-form {
            margin-bottom: 20px;
        }
        input[type="text"], input[type="email"], input[type="tel"] {
            padding: 5px;
            width: 300px;
        }
        button {
            padding: 5px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        label {
            margin-top: 10px;
            display: block;
        }
    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">用户列表</a> |
        <a href="{{ url_for('user_logout') }}">退出登录</a>
    </nav>
    <h1>老柳用户管理系统</h1>
    <h2>搜索用户</h2>

    <form method="GET" action="{{ url_for('basic_search') }}">
        <div class="search-box">
            <div class="basic-search">
                <input type="text" name="username" placeholder="搜索用户名" style="width: 200px;"
                       value="{{ request.args.get('username', '') }}">
                <input type="text" name="email" placeholder="搜索邮箱" style="width: 200px;"
                       value="{{ request.args.get('email', '') }}">
                <input type="text" name="address" placeholder="搜索地址" style="width: 200px;"
                       value="{{ request.args.get('address', '') }}">
                <input type="text" name="phone" placeholder="搜索手机" style="width: 200px;"
                       value="{{ request.args.get('phone', '') }}">
                <button type="submit">搜索用户</button>
            </div>

        </div>
    </form>

    <h2>添加用户</h2>
    <div class="add-user-form">
        <form action="{{ url_for('add_user') }}" method="POST">
            <input type="text" name="username" placeholder="添加用户名" required style="width: 200px;">
            <input type="email" name="email" placeholder="添加邮箱" required style="width: 200px;" >
            <input type="text" name="address" placeholder="添加地址" required style="width: 200px;">
            <input type="tel" name="phone" placeholder="添加手机" required style="width: 200px;">
            <button type="submit">添加用户</button>
        </form>
    </div>



    <h2>高级搜索</h2>
    <div class="search-box">
        <form action="{{ url_for('search_user') }}" method="GET">
            <input type="text" name="keyword" placeholder="用户名/邮箱/地址/电话搜索" style="width: 200px;">
            <button type="submit">高级搜索</button>
        </form>
    </div>

    <h2>用户列表</h2>
    <table>
        <thead>
            <tr>
                <th width="100px">用户名</th>
                <th width="150px">邮箱</th>
                <th width="100px">地址</th>
                <th width="100px">电话</th>
                <th width="100px">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for user_email, user_info in users %}
            <tr>
                <td>{{ user_email.username }}</td>
                <td>{{ user_email.email }}</td>
                <td>{{ user_info.address }}</td>
                <td>{{ user_info.phone }}</td>
                <td>
                    <a href="{{ url_for('delete_user', id=user_email.id) }}" onclick="return confirm('确定要删除吗？')">删除</a>
                    <a href="{{ url_for('edit_user', username=user_email.username) }}" class="edit-btn">修改</a>
                </td>


            </tr>
            {% else %}
            <tr>
                <td colspan="5">没有找到用户记录</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>


</body>
</html>